<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<!-- 自定义属性 -->
		<div id="app">
			<parent></parent>
		</div>
		<template id="p">
			<div>
				<h5>父组件</h5>
				<h3>{{name}}</h3>
				<child v-bind:ptoc="name" :ptocs="stus"></child>
			</div>
		</template>
		<template id="c">
			<div>
				<hr />
				<h5>子组件</h5>
				<h3>{{name}}</h3>
				<h5 style="color:orange">这是父组件传递的数据:{{ptoc}}</h5>
				<h5 style="color:green">这是父组件传递的数据:{{ptocs.id}}{{ptocs.name}}</h5>
			</div>
		</template>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				components: {
					parent: { //父组件
						template: '#p',
						data() {
							return {
								name: '张三',
								stus: {
									id: 6,
									name: 'VUE',
									salary: 999
								}
							}
						},
						components: {
							child: { //子组件
								//简单声明接收
								// props: ['ptoc'],
								props: {
									ptoc: {
										type: String, //类型限制
										require: true, //必传
										default: "张张"
									},
									ptocs: {
										type: Object
									}
								},
								template: '#c',
								data() {
									return {
										name: '张三三'
									}
								}
							}
						}
					}
				},
			})
		</script>
	</body>
</html>
